<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="${ otherUser.getPermission()==0 ? 'layout/online' : 'layout/admin'}">
<head>
    <!--    <title th:text="${otherUser.getUsername() + ' | JF'}">Title of profile view</title>-->
    <title th:text="${otherUser.getUsername()}">Title of profile view</title>
</head>
<body>
<main layout:fragment="content">
    <article class="container" style="padding: 3% 0 2%;">
        <header class="row">
            <div class="col s12">
                <blockquote class="flow-text left" th:text="|修改 | + ${otherUser.getUsername()} + | 的个人信息|">Profile</blockquote>
            </div>
        </header>
        <section>
            <form th:action="@{'/profile/' + ${otherUser.getId()}}" method="post">
                <div class="row">
                    <div class="col s12 ">
                        <label> 密码:
                            <input type="password" name="password" minlength="6" maxlength="10" data-length="10" placeholder="请输入6至10个字符" required="required"/>
                        </label>
                        <label> 简介:
                            <input type="text" name="introduction" th:value="${otherUser.getIntroduction()}" maxlength="16" data-length="10" placeholder="[可选]"/>
                        </label>
                        <label> 昵称:
                            <input type="text" name="nickname" th:value="${otherUser.getNickname()}" minlength="3" maxlength="10" data-length="10" placeholder="请输入您的昵称" required="required"/>
                        </label>
                        <p>
                            <input value="0" name="gender" class="with-gap" type="radio" id="male" th:checked="${otherUser.getGender() eq 0  ? 'checked' : undefined}" required="required"/>
                            <label for="male"> 男</label>
                            <input value="1" name="gender" class="with-gap" type="radio" id="female" th:checked="${otherUser.getGender() eq 1 ? 'checked' : undefined }" required="required"/>
                            <label for="female"> 女</label>
                        </p>
                        <label> 电话号码:
                            <input type="text" name="phoneNumber" th:value="${otherUser.getPhoneNumber()}"  maxlength="20" data-length="20" placeholder="请输入电话号码" required="required"/>
                        </label>
                    </div>
                </div>

                <div class="row">
                    <div class="col s12 center">
                        <span><button class="btn waves-effect waves-light btn-large" type="submit" name="modifyprofile">修改</button></span>
                    </div>
                </div>
            </form>
        </section>
    </article>
</main>
</body>
</html>